<!DOCTYPE html>
<html lang="ch">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>

    <style type="text/css">

        body {
            background-image: url("img/background.jpg");
            background-size: 100% 100%;
            background-attachment: fixed;
            margin: 0;
        }

        .blog_header {
            text-align: center;
            background-color: rgba(	255,192,203,0);
            height: 200px;
            margin: 0 auto;
        }

        .header_bar {
            background-color: rgba(	255,192,203,0.5);
            margin: -3.6px auto;
            width: 1423px;
            height: 50px;
        }

        .header_bar label {
            display: inline-block;
            position: relative;
            left: -100px;
            height: 50px;
            width: 220px;
            line-height: 50px;
            font-size: large;
            border-radius: 5px;
        }

        .header_bar label:hover {
            display: inline-block;
            position: relative;
            left: -100px;
            height: 50px;
            width: 220px;
            line-height: 50px;
            background-color: rgba(	255,192,203,0.8);
            cursor: pointer;
            border-radius: 5px;
        }

        .blog_section {
            position: relative;
            background-color: rgba(	255,192,203,0.5);
            width: 1160px;
            border-radius: 10px;
            top: 70px;
            margin: 0 auto 15px;
            padding-bottom: 115px;
        }

        .sec_item {
            position: relative;
            top: 40px;
            left: 230px;
            width: 100%;
        }

        .pagination-container{
            position: relative;
            text-align: center;
            bottom: 10px;
            margin: 0 auto;
            left: 0;
            right: 0;
        }
        .pagination{
            display: inline-block;
        }
        .pagination a{
            background-color: #999;
            color: #fff;
            padding: 1px 6px;
            text-decoration:none;
            border-radius: 5px;
            margin-right: 10px;
            cursor:pointer;
        }
        .pagination a.active{
            background-color: #85D1FF;
        }
        .page-change {
            margin: 0 15px;
            cursor:pointer;
        }
        .skip input {
            width: 50px;
        }

        #msg_c {
            position: relative;
            top: 45px;
            width: 70%;
        }

        @keyframes hide_girl {
            from {
                transform: translate(0, 100%);
            }
            to {
                transform: translate(0, 0);
            }
        }

        @keyframes show_girl {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(0, 100%);
            }
        }

        .moe_girl {
            position: fixed;
            bottom: 0;
            left: 30px;
            animation: hide_girl 1s linear;
            animation-fill-mode: forwards;
        }

        .moe_girl_hide {
            position: fixed;
            bottom: 0;
            left: 30px;
            animation: show_girl 1s linear;
            animation-fill-mode: forwards;
            animation-play-state: paused;
        }

        .moe_girl:hover {
            cursor: pointer;
        }

        .moe_girl_hide:hover {
            cursor: pointer;
        }

        #moe_box {
            position: fixed;
            bottom: 210px;
            left: 290px;
            opacity: 0;
            transition: all 1s;
        }

        .round_icon {
            width: 40px;
            height: 40px;
            display: flex;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

    </style>
    <title>Nanami's website</title>
</head>

<body>
    <script src="jquery-3.4.1.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="js/message_board.js"></script>
    <script src="js/msg_data_client.js"></script>

    <div class="blog_header">
        <img src="img/header0.jpg"  alt="blog_splash" height="200px">
        <div class="header_bar">
            <label onclick="location.reload();">HOME</label>
            <label id="msg_board" onclick="message_board()">留言板</label>
            <div style="display: inline-block; position: relative; left: 260px">
                <img src="img/mengobold.png" alt="mengso" style="position: relative;top: 10px" height="30px">
                <input id="search_input" style="width: 300px" type="text" placeholder="萌搜 为小众而搜" autocomplete="off" onkeypress="
                    if(event.keyCode==13) {
                        let _keyword = document.getElementById('search_input').value;
                        let url = 'https://mengso.com/search?q=' + _keyword;
                        window.open(url)
                    }
                ">
                <img src="img/search_icon.png" style="position:relative; width: 15px; right: 25px;top: 3px;cursor: pointer" onclick="
                let _keyword = document.getElementById('search_input').value;
                let url = 'https://mengso.com/search?q=' + _keyword;
                window.open(url)">
            </div>
        </div>
    </div>

    <div class="blog_section">
        <div class="sec_item">
        </div>
    </div>

    <div class="pagination-container">
        <span class="page-change prev">上一页</span>
        <div class="pagination"></div>
        <span class="page-change next">下一页</span>
    </div>

    <div id="moe_dialog" onmouseleave="document.getElementById('moe_box').style.opacity=0">
        <img class="moe_girl_hide" src="img/shawu.png"  alt="xxb" width="300px" onmousemove="document.getElementById('moe_box').style.opacity=1">
        <div id="moe_box">
            <img src="img/boc0.png" alt="box0" width="200px">
            <p style="position: absolute; top:53px; left: 60px">.....</p>
        </div>
        <label id="moe_lab" style="position: fixed;bottom: 0;padding: 3px;cursor: pointer;transition: all 1s;opacity: 0" onclick=hide_girl(); onmousemove="document.getElementById('moe_lab').style.opacity=1"
        onmouseleave="document.getElementById('moe_lab').style.opacity=0">隐藏</label>
        <script type="text/javascript">
            function hide_girl() {
                let _moe_lab = $("#moe_lab");
                if(_moe_lab.html() === "隐藏") {
                    _moe_lab.html("显示");
                    $(".moe_girl").attr("class","moe_girl_hide");
                    $(".moe_girl_hide").css("animation-play-state","running");
                }
                else {
                    _moe_lab.html("隐藏");
                    $(".moe_girl_hide").attr("class","moe_girl");
                }
            }
        </script>
    </div>

    <script>
        let newsData = [];
        let req = new XMLHttpRequest();
        req.open("get", "newsData.json");
        req.send(null);
        req.onload = function () {
            if (req.status === 200) {
                newsData = JSON.parse(req.responseText);

                let secitem = document.querySelector(".sec_item");
                let pagination = document.querySelector(".pagination");
                let pageCount = Math.ceil(newsData.length/2);
                let newsDataRender = [];//每页要显示的数据
                let p = 1;//根据p值显示每页的数据

                let render = ()=>{
                    secitem.innerHTML = '';
                    newsDataRender = newsData.slice((p-1)*2,2*p); //每页要显示的数据,一页显示2条
                    newsDataRender.forEach((item,index)=>{
                        secitem.innerHTML += `<div>
                                        <h1><a style="color: black;text-decoration: none" href=${item.href}>${item.title}</a></h1>
                                        <img src=${item.img} alt=${item.img} width="720px">
                                        <p>${item.content}</p>
                                        <br>
                                    </div>`;
                    });
                };
                render();

                //渲染分页
                for(let i = 1;i<=pageCount;i++){
                    pagination.innerHTML +=`<a>${i}</a>`;
                }
                let asAll = pagination.querySelectorAll('a');
                //页面刚进来时第一页高亮
                asAll[p-1].classList.add('active');

                //遍历总页数
                asAll.forEach((item,index)=>{
                    //点击页数
                    item.onclick = function () {
                        for(let j=0;j<asAll.length;j++){
                            asAll[j].classList.remove('active');
                        }
                        this.classList.add('active');
                        p=index+1; //点击页数，改变p的值，以改变这个页面要显示的数据，达到分页的效果
                        render(); //重新渲染页面
                        document.scrollingElement.scrollTop = 0;
                    }
                });

                //点击上一页下一页，改变高亮
                let changePageClass = ()=>{
                    for(let j=0;j<asAll.length;j++){
                        asAll[j].classList.remove('active');
                    }
                    asAll[p-1].classList.add('active');
                };
                //上一页
                let prev = document.querySelector('.prev');
                prev.onclick = function (e) {
                    if(p<=1){
                        console.log(p);
                        return;
                    } else {
                        p=p-1;
                        changePageClass();
                        render();
                        document.scrollingElement.scrollTop = 0;
                    }
                };
                //下一页
                let next = document.querySelector('.next');
                next.onclick = function () {
                    if(p>=asAll.length){
                        return;
                    }
                    p=p+1;
                    changePageClass();
                    render();
                    document.scrollingElement.scrollTop = 0;
                };
            }
            else
                console.log("get newsdata error");
        };

        (function () {
            function handle_click() {
                let moe_box_data = new Array(8);
                moe_box_data[0] = "嗯...";
                moe_box_data[1] = "该干嘛啊...";
                moe_box_data[2] = "思考中...";
                moe_box_data[3] = "无聊中...";
                moe_box_data[4] = "emmmmm";
                moe_box_data[5] = "讨厌呀...";
                moe_box_data[6] = "诶...";
                moe_box_data[7] = "...";
                let moe_box_num = Math.floor(Math.random() * 7);
                document.querySelector("#moe_box p").innerHTML = moe_box_data[moe_box_num];
            }
            $(".moe_girl").click(handle_click);
            $(".moe_girl_hide").click(handle_click);
        })();

    </script>
</body>
</html>